import React, { useState } from 'react'
import './sqgl.less'

export default function SQGridList(props) {
    // console.log(props);
    const [current,setCurrent] = useState(0)
    const changeSelect = (index,key)=>{
        setCurrent(index)
        props.onItemChange(key)
    }
    return (
        <div className="sqgl">
            <h4>{props.title}</h4>
            <div className="list">
                {/* <div className="list-btn active">全部</div>
                <div className="list-btn">未做</div> */}
                {
                    props.data.map((item,index)=>{
                        return <div key={item.key} onClick={()=>changeSelect(index,item.key)} className={["list-btn",index === current ? 'active' : ''].join(' ')}>{item.zh}{item.value}</div>
                    })
                }
            </div>
        </div>
    )
}
